<template>
	<!-- 首页  -->
	<view class="page_body whith_bg">

		<mescroll-body :fixed="true" top="45px" ref="mescrollRef" @init="mescrollInit" :up="upOptions" :down="upOptions">

			<!-- 导航栏 -->
			<u-navbar leftText="" title="" :safeAreaInsetTop="true" style="z-index: 1;">
				<view slot="left">
				</view>
				<view slot="center">
					<u-tabs style="width: 750upx;background-color: #FFFFFF; z-index: 200;" :current="currentTab" :list="tabList" @click="tabsClick"
								:scrollable="false" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}">
						<view slot="right" style="float: left;margin-right: 10px;" @tap="search()">
							<u-icon name="search" size="30" bold></u-icon>
						</view>
					</u-tabs>
				</view>
			</u-navbar>


			<!-- 数据列表 -->
			<swiper :style="{height: swiperHeight + 'px'}" :current="currentTab" @change="swiperChange">

				<swiper-item>
					<flow-list ref="swiperItemList0" :height="swiperHeight" :disable-scroll="false"
							@video_play="videoPlayBack"></flow-list>
				</swiper-item>


				<swiper-item v-for="(item,index) in swiperTabList" :key="index">
					<info-list  :ref="'swiperItemList'+(index+1)" :height="swiperHeight" :disable-scroll="false"
								:list-type="item.type" @video_play="videoPlayBack">
					</info-list>
				</swiper-item>

			</swiper>


			<video-play ref="play"></video-play>


			<!-- 底部导航栏	 -->
			<tabbar :currentTabbar="0"></tabbar>

		</mescroll-body>




	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import tabbar from '@/components/tabbar.vue'
	import InfoList from "@/pages/index/cpns/info-list.vue"
	import FlowList from "@/pages/index/cpns/flow-list.vue"
	import VideoPlay from "@/components/file/videoPlay.vue";
	export default {
		components: {
			tabbar,
			InfoList,
			FlowList,
			VideoPlay
		},
		mixins: [MescrollMixin],
		data() {
			return {
				upOptions: {
					// 是否启用上拉加载
					use: false
				},
				// swiper的高度
				swiperHeight: "",
				// 菜单分类
				tabList: [{name: '关注'}, {name: '发现'}, {name: '视频'}, {name: '图文'}],
				// swiper分类
				swiperTabList: [{name: '发现',type: ''}, {name: '视频',type: '1'}, {name: '图文',type: '0'}],
				// 当前菜单索引
				currentTab: 1,
			}
		},
		created() {
			// 设置swiper的高度
			this.swiperHeight = uni.getSystemInfoSync().windowHeight - 44 -50
		},
		onLoad() {
			uni.hideTabBar()
			this.initComponentData()
		},
		methods: {
			initComponentData(){
				this.$nextTick(()=>{
					let refs = this.$refs['swiperItemList'+this.currentTab];
					if (refs) {
						if (Array.isArray(refs)){
							refs[0].initData()
						}else{
							refs.initData()
						}
					}
				})
			},
			// swiper切换
			swiperChange(e) {
				this.currentTab = e.detail.current
				this.initComponentData()
			},
			// tabs点击事件
			tabsClick(e) {
				this.currentTab = e.index
				this.initComponentData()
			},
			// 获取指定下标的mescroll对象
			getSwiperItemScroll(i) {
				let swiperItems = this.$refs.swiperItemList;
				if (swiperItems) {
					let item = swiperItems[i]
					if (item) return item.mescroll
				}
				return null
			},
			// 搜索
			search(){
				uni.navigateTo({
					url: '/pages/search/searchResult'
				})
			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			moveHandle(){

			}

		}
	}
</script>

<style lang="scss" >
	.status_bar{
		height: 45px;
	}
</style>
